<template>
  <div class="cart-list">
    <van-empty description="当前购物车为空" v-if="!cartlist.length" />
    <div v-else>
      <div class="cart-item" v-for="item in cartlist" :key="item.id">
        <div class="cart-item-left">
          <!-- 复选框 -->
          <van-checkbox
            v-model="item.checked"
            shape="square"
            checked-color="#ee0a24"
            icon-size="14px"
          />
        </div>
        <div class="cart-item-img">
          <!-- 图片 -->
          <img :src="item.imgUrl" alt="" />
        </div>
        <div class="cart-item-right">
          <!-- 描述 -->
          <div class="cart-item-right-title">
            {{ item.name }}
          </div>
          <!-- 是否选择规格 -->
          <div class="cart-item-right-spec" v-show="item.spec">
            {{ item.spec }}
          </div>
          <div class="cart-item-right-price">
            <span>￥{{ item.newPrice.toFixed(2) }}</span>
            <span>{{ item.oldPrice.toFixed(2) }}</span>
          </div>
        </div>
        <div class="cart-item-btn">
          <van-stepper
            v-model="item.count"
            :name="item.id"
            @change="throttleChangeCount1"
            theme="round"
            disable-input
            input-width="16px"
            button-size="15px"
          />
        </div>
      </div>
    </div>

    <!-- 为您推荐 -->
    <div class="recommend">
      <recommend-bar title="为您推荐" />
      <cart-recommend :list="recommendList" />
    </div>

    <!-- 提交栏 -->
    <van-submit-bar
      :price="checkedCount!==0 ? checkedPrice * 100 : 0"
      :button-text="'去结算' + '(' + checkedCount + ')'"
      @submit="debounceSubmit"
      class="submit-bar"
    >
      <van-checkbox
        v-model="isAllChecked"
        shape="square"
        checked-color="#ee0a24"
        @change="changeAllchecked1"
        >全选</van-checkbox
      >
    </van-submit-bar>
  </div>
</template>

<script setup lang="ts">
import { useCartStore } from '@/stores'
import { storeToRefs } from 'pinia'
import { showToast } from 'vant'
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useThrottle } from '@/hooks/dmx/useThrottle'
import { useDebounce } from '@/hooks/dmx/useDebounce'
import axios from 'axios'
const router = useRouter()

const cartStore = useCartStore()
const { isAllChecked, checkedCount,checkedPrice } = storeToRefs(cartStore)
const { changeCount, changeAllchecked } = cartStore
const { cartlist } = defineProps({
  cartlist: Array
})

const changeCount1 = (a: any, b: any) => {
  console.log(a, b)
  changeCount(b.name, a)
}

//全选
// const checked = ref(true)
const changeAllchecked1 = (checked: boolean) => {
  changeAllchecked(checked)
}
//提交订单
const onSubmit = () => {
    if(checkedCount.value===0) return showToast('请选择商品')
    router.push({
        name: 'submitOrder'
    })
}

// 防抖
const throttleChangeCount1 = useThrottle(changeCount1, 2000)
//节流
const debounceSubmit = useDebounce(onSubmit, 1000)

onMounted(() => {
  // console.log(cartlist)
  getAllProducts()
})
//获取所有数据
const products = ref([])
const getAllProducts = async () => {
  const {data:{data,code}} = await axios.get('api/dmx/product')
  console.log(data)
  if(code==200){
    products.value = data
  }
  //基于内容的推荐简单算法
  const targetProduct = products.value.find(item=>item._id === cartlist[0].id);

  const similarityFunction = (product1:any, product2:any) => {
    let similarityScore = 0;
    if (product1.cate === product2.cate) similarityScore += 0.3;
    if (product1.brand === product2.brand) similarityScore += 0.2;
    // 根据其他属性继续计算相似度
    return similarityScore;
  };

  const recommendedProductsBasedOnContent = products.value
  .filter(product => product._id!== targetProduct._id)
  .sort((a:any, b:any) => similarityFunction(targetProduct, b) - similarityFunction(targetProduct, a))
  .slice(0, 5);
  console.log(recommendedProductsBasedOnContent);
    recommendList.value = recommendedProductsBasedOnContent
}



//推荐列表生成
const recommendList = ref([
  {
    id: 1,
    imgUrl: 'https://img.yzcdn.cn/vant/apple-3.jpg',
    name: 'Apple iPhone 8 Plus      11111111111111111111111111111111111',
    newPrice: 999,
    oldPrice: 1099,
    spec: '256GB/深空灰'
  },
  {
    id: 2,
    imgUrl: 'https://img.yzcdn.cn/vant/apple-3.jpg',
    name: 'Apple iPhone 8 Plus',
    newPrice: 999,
    oldPrice: 1099,
    spec: '256GB/深空灰'
  },
  {
    id: 3,
    imgUrl: 'https://img.yzcdn.cn/vant/apple-3.jpg',
    name: 'Apple iPhone 8 Plus',
    newPrice: 999,
    oldPrice: 1099,
    spec: '256GB/深空灰'
  },
  {
    id: 4,
    imgUrl: 'https://img.yzcdn.cn/vant/apple-3.jpg',
    name: 'Apple iPhone 8 Plus',
    newPrice: 999,
    oldPrice: 1099,
    spec: '256GB/深空灰'
  },
  {
    id: 5,
    imgUrl: 'https://img.yzcdn.cn/vant/apple-3.jpg',
    name: 'Apple iPhone 8 Plus',
    newPrice: 999,
    oldPrice: 1099
  },
  {
    id: 6,
    imgUrl: 'https://img.yzcdn.cn/vant/apple-3.jpg',
    name: 'Apple iPhone 8 Plus',
    newPrice: 999,
    oldPrice: 1099,
    spec: '256GB/深空灰'
  },
  {
    id: 7,
    imgUrl: 'https://img.yzcdn.cn/vant/apple-3.jpg',
    name: 'Apple iPhone 8 Plus',
    newPrice: 999,
    oldPrice: 1099,
    spec: '256GB/深空灰'
  },
  {
    id: 8,
    imgUrl: 'https://img.yzcdn.cn/vant/apple-3.jpg',
    name: 'Apple iPhone 8 Plus',
    newPrice: 999,
    oldPrice: 1099,
    spec: '256GB/深空灰'
  },
  {
    id: 9,
    imgUrl: 'https://img.yzcdn.cn/vant/apple-3.jpg',
    name: 'Apple iPhone 8 Plus',
    newPrice: 999,
    oldPrice: 1099,
    spec: '256GB/深空灰'
  },
  {
    id: 10,
    imgUrl: 'https://img.yzcdn.cn/vant/apple-3.jpg',
    name: 'Apple iPhone 8 Plus',
    newPrice: 999,
    oldPrice: 1099,
    spec: '256GB/深空灰'
  }
])
</script>

<style lang="scss" scoped>
.cart-list {
  width: 100%;
  .cart-item {
    width: 90%;
    height: 140px;
    padding: 15px;
    margin: 10px 5%;
    border-radius: 10px;
    background-color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    .cart-item-left {
      width: 10%;
    }
    .cart-item-img {
      width: 25%;
      height: 100%;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .cart-item-right {
      width: 70%;
      height: 100%;
      margin-left: 5%;
      .cart-item-right-title {
        height: 50%;
        font-size: 16px;
        font-weight: bold;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* 控制显示的行数 */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all; /* 防止长单词溢出容器 */
      }
      .cart-item-right-spec {
        margin-top: 2%;
        height: 20%;
        color: gray;
        font-size: 13px;
        //超出一行隐藏为...
        display: -webkit-box;
        -webkit-line-clamp: 1; /* 控制显示的行数 */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .cart-item-right-price {
        margin-top: 5%;
        span:nth-child(1) {
          color: rgb(218, 24, 33);
          font-size: 18px;
          margin-right: 5%;
        }
        span:nth-child(2) {
          color: gray;
          text-decoration: line-through;
        }
      }
    }
    .cart-item-btn {
      position: absolute;
      bottom: 5%;
      right: 5%;
    }
  }
  .submit-bar {
    position: fixed;
    bottom: 50px;
  }
}
</style>
